<template>
  <div id="name">  
      <div class="top_box">
          <div class="item" :class='[show=="1" ? "item_act" : ""]' @click="show_but(1)">扭蛋管理</div>
          <!-- <div class="item" :class='[show=="2" ? "item_act" : ""]' @click="show_but(2)">拼团财团版</div>
          <div class="item" :class='[show=="3" ? "item_act" : ""]' @click="show_but(3)">拼团富翁版</div>
          <div class="item" :class='[show=="4" ? "item_act" : ""]' @click="show_but(4)">拼团新手版</div>
          <div class="item" :class='[show=="5" ? "item_act" : ""]' @click="show_but(5)">推新大比拼</div> -->

           <div class="item" :class='[show=="6" ? "item_act" : ""]' @click="show_but(6)">蜂盈礼品</div>
      </div>
      
      <gashapon  v-if="show == 1"> </gashapon>
      <!-- <groupWork v-if="show == 2">    </groupWork>
      <richGroupWork  v-if="show == 3"> </richGroupWork>
      <novice-group-work  v-if="show == 4"> </novice-group-work>
      <compare v-if="show == 5"></compare> -->

      <meeting v-if="show == 6"></meeting>
  </div>
</template>

<script>
import Gashapon from '@/view/Activity/Gashapon'
import GroupWork from '@/view/Activity/GroupWork'
import RichGroupWork from '@/view/Activity/RichGroupWork'
import NoviceGroupWork from '@/view/Activity/NoviceGroupWork'
import Compare from '@/view/Activity/Compare'

import Meeting from '@/view/Activity/Meeting'

export default {
  name: 'name',
  data () {
    return {
        show:1,
    }
  },
   components:{
      Gashapon,
      GroupWork,
      RichGroupWork,
      NoviceGroupWork,
      Compare,

      Meeting
  },
  created(){
      
  },
  mounted (){
      
  },
  methods: {
      show_but(num){
         this.show = num
      }
  }
}
</script>


<style scoped>
  /* .top_box{
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .item{
     width: 200px;
     height: 60px;
     text-align: center;
     line-height:57px;
     color:black;
     background-image: url('~@/assets/images/select_bg.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
  }
  .item_act{
      background-image: url('~@/assets/images/select_act_bg.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     color: white;
  }
  .item:hover{
    cursor:pointer
   } */
 .top_box{
     display: flex;
     justify-content: center;
     align-items: center;
     background-color:#F7F7FF;
     margin-left: -15px;
     margin-right: -15px;
     margin-top: -11px;
     margin-bottom: 15px;
  }
  .item{
     width: 180px;
     height: 40px;
     text-align: center;
     line-height:40px;
     color:#333333;   
     /* background: #FFFBF0; */
     margin-left: 5px;
     border-bottom:3px solid #D9DADC;
  }
  .item_act{
     color:#F6C54C;   
     background: #FFFBF0;
     border-bottom:3px solid#F6C54C;
  }
  .item:hover{
    cursor:pointer
   }
</style>
